<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Vue 3 生命周期</title>
</head>
<body>
<div id="app">

    <button @click="change">修改</button>
    <p></p>
    <button v-on:click="hitMe($event, '欢迎学习VUE')">测试</button>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'Vue生命周期'
            };
        },
        methods: {
            change() {
                this.message = 'Vue生命周期修改';
            },

            hitMe(event,content){
                alert(`鼠标点击坐标：(${event.clientX}, ${event.clientY}); ${this.message} 方法参数：${content}`)
            }
        },

    });

    const vm = app.mount('#app');

    // 5秒后卸载组件，测试 beforeUnmount 和 unmounted
    setTimeout(() => {
        app.unmount();
        alert('🚀 组件已卸载');
    }, 5000);
</script>
</body>
</html>
